<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>速算训练营</title>
  <link rel="stylesheet" href="/css/math_train.css">
</head>
<body>
  <div class="app-container">
    <main class="main-content">
      <!-- 导航栏 -->
      <nav class="navbar">
        <div class="navbar-container">
          <div class="navbar-left">
            <span class="navbar-title">速算训练营</span>
            <button class="navbar-btn" id="newBtn">生成新题</button>
            <button class="navbar-btn" id="checkBtn">提交答案</button>
          </div>

          <div class="navbar-center">
            <div class="timer">
                <span id="minutes">00</span>:<span id="seconds">00</span>
                <span id="totalSeconds" style="font-size: 0.8em">(0秒)</span>
            </div>
          </div>

          <div class="navbar-right">
            <span class="navbar-username" id="navbarUsername"></span>
            <button class="navbar-btn logged-out" id="showLoginModalBtn">登录</button>
            <button class="navbar-btn logged-in" id="logoutBtn" style="display: none;">退出</button>
            <button class="navbar-btn logged-in" id="userCenterBtn" style="display: none;" onclick="window.location.href='/math_train_user'">用户中心</button>
          </div>
        </div>
      </nav>

      <!-- 主内容 -->
      <div class="container">
        <div class="question-grid" id="grid"></div>
      </div>

      <div id="loginModal" class="modal">
        <div class="modal-content">
          <h2>数学训练登录</h2>
          <form id="mathTrainLoginForm">
            <div class="modal-input-group">
              <input type="text" id="mathTrainUsername" placeholder="用户名">
            </div>
            <div class="modal-input-group">
              <input type="password" id="mathTrainPassword" placeholder="密码">
            </div>
            <button type="submit" id="mathTrainLoginBtn">登录</button>
          </form>
        </div>
      </div>

      <script src="/js/math_train.js"></script>
    </main>
  </div>

  <footer class="footer">
    <div class="shortcut-tip">
      快捷键：←↑→↓ 导航题目| enter进入下一题 | Shift+Alt 提交答案
    </div>
  </footer>
</body>
</html>
